<template>
  <div class="main-menu">
    <div class="logo">
      <img class="img" src="@/assets/img/logo.svg" alt="" />
      <!-- 这个文本不会被折叠，需要手动处理 -->
      <h2 class="title" v-show="!isFold">宏源管理系统</h2>
    </div>

    <div class="menu">
      <el-menu
        background-color="#001529"
        :collapse="isFold"
        :default-active="defaultActive"
        text-color="#fff"
        class="el-menu-vertical-demo"
      >
        <menu-v1 :menuList="filterTree(loginStore.userMenus as [], 'type', '3', [])" />
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import menuV1 from './components/menu-v1.vue'
  import useLoginStore from '@/store/login'
  import { filterTree } from '@/utils/index'
  import { mapPathToMenu } from '@/utils/map-menus'
  import { useRoute } from 'vue-router'

  interface Props {
    isFold: boolean
  }

  withDefaults(defineProps<Props>(), {
    isFold: false
  })

  const loginStore = useLoginStore()
  const $route = useRoute()
  const defaultActive = computed(() => mapPathToMenu($route.path, loginStore.userMenus as any[]).id + '')
</script>

<style lang="scss" scoped>
  .main-menu {
    height: 100%;
    background-color: #001529;
    .logo {
      display: flex;
      height: $base-menu-logo-height;
      padding: 12px 10px 8px 3px;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      overflow: hidden;
      .img {
        height: 100%;
        margin: 0 10px;
      }
      .title {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
      }
    }
    .menu {
      .el-menu {
        border-right: none;
      }
    }
  }
</style>
